<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-if="initModalHtml.typeCtrl" v-show="isShowModalQuery">
      <div class="modal-ctrl-main even-row-ctrl">
        <div class="modal-title">
          <p>{{initModalHtml.typeCtrl.title}}</p>
        </div>
        <div class="modal-ctrl-content">

          <div class="even-row">

            查询：{{initModalHtml.initData}}
            <br>

            <!--通用 -->
            <div class="modal-row" v-for="(item,index) in initModalHtml.typeCtrl.content" v-show=" item.display==='0' " :key="index">

              <!-- 通用标题 -->
              <div class="modal-form-key f-l">
                {{item.label}}：
              </div>

              <!-- 下拉选择 -->
              <select :disabled="item.readonly === '1'" v-if="item.inputType==='select'" :ref="item.fieldName">
                <option v-for="(option,index) in item.options" :key="index" :value="option.value">{{ option.displayname }}</option>
              </select>

              <!-- 通用输入框 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='hidden'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder" >

              <!-- 通用输入框 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='text'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder" @blur="formVerify(item,initModalHtml.btns,item.fieldName)">

              <!-- 通用下拉树 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='selectTree'" @click="selectTreeModal(item)" :type="item.inputType" class="modal-text f-l" :placeholder="item.placeholder" @focus="treeIsShow(item.treeBodyId)">

              <!-- 通用下拉树搜索树 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='selectSearch'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

              <!-- 通用日期选择 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='birthday'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

              <!-- 通用选择模态窗 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='modal'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

              <!-- 通用文件选择模态窗 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='file'" :type="item.inputType"  class="modal-text f-l" :placeholder="item.placeholder">

              <!-- 通用生日 -->
              <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='date'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

              <!-- 下拉树选择 -->
              <div class="ModalTreeBody" v-if="item.treeBodyId">
                <input type="hidden"
                       :dataFieldName="item.treeBodyId"
                       :ref="item.fieldName" v-if="item.inputHidden">
                <div :id="item.treeBodyId" class="ztree" :dataFieldName="item.treeBodyId"></div>
              </div>
            </div>

          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn" :class="btn.className" v-for="(btn,index)  in initModalHtml.btns" :key="index" @click="formData(btn)" :id="btn.id">
            {{ btn.name }}
          </button>
          <!-- <button type="button" class="btn btn-default" >取消</button>
          <button type="button" class="btn btn-info" @click="formData(initModalHtml)">确定</button> -->
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

    export default {
        name: "ModalQuery",
        props:["isShowModalQuery","initModalHtml"],
        methods:{
          formData(btnObj){
            //console.log(btnObj);

            if(btnObj.click){
              if( layoutFn.btnSubStringType(btnObj.id) === "submit" || layoutFn.btnSubStringType(btnObj.id) === "edit" ){
                let params = {};
                //console.log(this.$refs);
                for( let resKey in this.$refs ){
                  //console.log(resKey);
                  //console.log(this.$refs[resKey][0].value);
                  params[resKey] = this.$refs[resKey][0].value;
                }
                this.modalAjaxFormSub(btnObj.click[0].httpType,btnObj.click[0].url,params);
              }
            }

            this.modalClose();
          },
          modalClose(){
            this.initModalHtml.typeCtrl.content = [];
            this.$emit("modal-close");
          },
        },
        watch:{
        initModalHtml(newVal,lodVal){

          //console.log(newVal);
          let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
          //console.log(stroageData);
          let params = {};

          if(newVal.initData[0]){ //存在初始化数据的时候
            for( let i=0;i<newVal.initData[0].params.length;i++ ){
              for( let key in stroageData ){
                if( newVal.initData[0].params[i].name === key ){
                  params[key] = stroageData[key];
                }
              }
            }

            this.$axios[newVal.initData[0].httpType](this.HOST+newVal.initData[0].url,{
              params:params
            })
              .then((data)=>{
                ////console.log(data)
                ////console.log(this.$refs);
                //this.$refs.name[0].value = "12334567890"
                ////console.log(data.data.data);
                for( let responseKey in data.data.data){
                  // //console.log("||");
                  // //console.log( responseKey);
                  // //console.log( data.data.data[responseKey]);
                  for( let refsKey in this.$refs ){
                    ////console.log(refsKey);
                    if( refsKey.indexOf("|") != -1 ){ //判断是否查询的key是否有取子集字段
                      ////console.log(this.$refs[refsKey]);
                      let keyArr = refsKey.split("|");
                      if( responseKey === keyArr[0] ){ //需要获取当前key的下集value
                        ////console.log(refsKey);
                        ////console.log(data.data.data[keyArr[0]][keyArr[1]]);
                        this.$refs[refsKey][0].value = data.data.data[keyArr[0]][keyArr[1]];
                        //  //console.log(this.$refs[refsKey][0].value);
                      }
                    }else{
                      if( responseKey === refsKey ){ //获得当前key下的value
                        //console.log(this.$refs);
                        //console.log(responseKey);
                        // //console.log(refsKey);
                        //console.log(data.data.data[refsKey]);
                        //console.log(this.$refs[refsKey][0]);
                        this.$refs[refsKey][0].value = data.data.data[refsKey];
                        ////console.log(refsKey);
                        ////console.log(this.$refs[refsKey][0].value);
                      }
                    }

                  }
                }
              })
              .catch((err)=>{
                //console.log(err);
              })

          }

        }

      }
    }
</script>

<style scoped>

</style>
